


Basic Text Message Work Skin

by ProfessorMotz (Motz)



Category: No Fandom
Genre: Fanwork Research & Reference Guides, Work Skin
Language: English
Status: Completed
Published: 2019-12-15
Updated: 2019-12-15
Packaged: 2021-02-26 06:21:39
Rating: General Audiences
Warnings: No Archive Warnings Apply
Chapters: 1
Words: 667
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/21799039
Author URL: https://archiveofourown.org/users/Motz/pseuds/ProfessorMotz
Summary: A simple text message format that retains basic readability even without skins enabled. Please feel free to use. Instructions included, some assembly required ;) Please feel free to comment if you have any questions or issues.
Comments: 7
Kudos: 47
Collections: A Guide to Coding and Fanworks, Fanfiction Reference Works





	Basic Text Message Work Skin

Example | Set Up | Usage | Fallback Examples

##  Example

This paragraph is unformatted text. This is how the rest of your story would look. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

> This is the outgoing text message.

> This is the incoming text message.

> If your story is from a certain character's perspective, you would probably place the text message they wrote here.

> If your story is from a certain character's perspective, you would probably place the text message they receive here.

##  Set Up

  1. [Create a new Work Skin](https://archiveofourown.org/skins/new?skin_type=WorkSkin) and enter this for the CSS:
    
        #workskin .rmsg {
      font-family: monospace;
      text-align: right;
      width: 60%;
      font-size: 120%;
      border-left: none;
      padding: 0;
      margin: 1.286em auto;
    }
    
    #workskin .lmsg {
      font-family: monospace;
      width: 60%;
      font-size: 120%;
      border-left: none;
      padding: 0;
      margin: 1.286em auto;
    }

  2. Apply the Work Skin to the fic you want (can be done when creating a new fic, or when editing an existing one)
  3. Continue to the next section to apply the formatting to actual text in your fic



##  Usage

Let's pretend that the following is your wonderful story (without any special formatting):

* * *

I'm bored. I'm going to text my best friend. I'm going to narrate some more first though, so you can see how the style would look after a more typical paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pulvinar etiam non quam lacus suspendisse.

Hello BestFriend. This is MainCharacter.

Hi MainCharacter! What's up?

* * *

If you put this as your Work Text in AO3, and then click on "HTML", this is what you will see:
    
    
    <p>I'm bored. I'm going to text my best friend. I'm going to narrate some more first though, so you can see how the style would look after a more typical paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pulvinar etiam non quam lacus suspendisse.</p>
    <p>Hello BestFriend. This is MainCharacter.</p>
    <p>Hi MainCharacter! What's up?</p>

Let's edit it like this (note that the first line stays the same, because it's not part of the text message conversation):
    
    
    <p>I'm bored. I'm going to text my best friend. I'm going to narrate some more first though, so you can see how the style would look after a more typical paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pulvinar etiam non quam lacus suspendisse.</p>
    <blockquote class="rmsg">Hello BestFriend. This is MainCharacter.</blockquote>
    <blockquote class="lmsg">Hi MainCharacter! What's up?</blockquote>

This is what your story will look like now:

* * *

I'm bored. I'm going to text my best friend. I'm going to narrate some more first though, so you can see how the style would look after a more typical paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pulvinar etiam non quam lacus suspendisse.

> Hello BestFriend. This is MainCharacter.

> Hi MainCharacter! What's up?

##  Fallback Examples

This skin and its instructions are designed to be "good enough" even if someone is unable to use the work skin itself. See the fallback examples below.

This is how your work will appear to someone with work skins disabled:  


This is how your work will appear to someone using Firefox's reader view:  


This is how your work will appear to someone using Safari's reader view:  


This is how your work will appear to someone using Safari on their phone (not really a fallback example, but just to show that the skin still works!):  



End file.
